 <template>
 	<view>
 		<view class="state-box box">
 			<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm">
 				<u-form-item label="任务类型：" borderBottom required prop="Name" @click="show = true">
 					<u--input disabledColor="#ffffff" disabled placeholder="请选择任务类型" border="none"
 						v-model="form.Name"></u--input>
						<u-icon slot="right" name="arrow-right" color="#d4c5c5"></u-icon>
 				</u-form-item>
 				<u-form-item label="任务名称：" borderBottom required prop="taskName">
 					<u--input disabledColor="#ffffff" placeholder="请输入任务名称" border="none"
 						v-model="form.taskName"></u--input>
						<u-icon slot="right" name="arrow-right" color="#d4c5c5"></u-icon>
 				</u-form-item>
 				<u-form-item label="任务编码：" borderBottom required prop="taskCode">
 					<u--input disabledColor="#ffffff" placeholder="请输入任务编码" border="none"
 						v-model="form.taskCode"></u--input>
 					<u-icon slot="right" name="arrow-right" color="#d4c5c5"></u-icon>
 				</u-form-item>
 				<u-form-item label="计划名称：" borderBottom required @click="shows" prop="planName">
 					<u--input disabledColor="#ffffff" disabled placeholder="请选择计划名称" border="none"
 						v-model="form.planName"></u--input>
						<u-icon slot="right" name="arrow-right" color="#d4c5c5"></u-icon>
 				</u-form-item>
 				<u-form-item label="计划编码：" borderBottom  prop="planCode">
 					<u--input disabledColor="#ffffff" disabled border="none" v-model="form.planCode"></u--input>
					<u-icon slot="right" name="arrow-right" color="#d4c5c5"></u-icon>
 				</u-form-item>
 				<u-form-item label="计划类型：" borderBottom  prop="planType">
 					<u--input disabledColor="#ffffff" disabled border="none" v-model="form.planType"></u--input>
					<u-icon slot="right" name="arrow-right" color="#d4c5c5"></u-icon>
 				</u-form-item>
				<u-form-item label="开始时间：" prop="planStartTime" required borderBottom ref="item1" @click="open(1)">
					<u--input v-model="form.planStartTime" disabled disabledColor="#ffffff" placeholder="请选择预计开始时间"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="结束时间：" prop="planEndTime" required borderBottom ref="item1" @click="open(2)">
					<u--input v-model="form.planEndTime" disabled  disabledColor="#ffffff" placeholder="请选择预计结束时间"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
 			</u--form>
 			<view class="butt">
 				<view class="verification verification1" @click="tj">
 					提交
 				</view>
 			</view>
 		</view>


 		<u-popup :show="show" mode="center" @close="cancel" class="weizi">
 			<template>
 				<view class="popup-header" style="margin-bottom: 12rpx;">
 					选择任务
 				</view>
 				<view class="container">
 					<u-radio-group v-model="form.taskType" placement="column" shape="circle" iconPlacement="right"
 						activeColor="#38AFFF">
 						<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in dict" :key="index"
 							:label="item.dictLabel" :name="item.dictValue">
 						</u-radio>
 					</u-radio-group>
 				</view>
 				<!-- 确定按钮 -->
 				<view class="button" @click="button1">
 					确定
 				</view>
 			</template>
 		</u-popup>
 		<u-popup :show="planshow" mode="center" @close="cancel" class="weizi">
 			<template>
 				<view class="popup-header" style="margin-bottom: 12rpx;">
 					计划名称
 				</view>
 				<view class="container">
 					<u-radio-group v-model="form.planId" placement="column" shape="circle" iconPlacement="right"
 						activeColor="#38AFFF">
 						<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in plan" :key="index"
 							:label="item.planName" :name="item.planId">
 						</u-radio>
 					</u-radio-group>
 				</view>
 				<!-- 确定按钮 -->
 				<view class="button" @click="button2">
 					确定
 				</view>
 			</template>
 		</u-popup>
		<!-- 日期组件 -->
		<u-datetime-picker :show="time" mode="datetime" @cancel="cancel" @confirm="confirm"></u-datetime-picker>
		
 	</view>


 </template>

 <script>
	 import {
	 	timestampToTime
	 } from '@/utils/timestamp'
 	import {
 		addDetails,
 		getPlan
 	} from '@/api/facilityPatrol/upkeep.js'
 	import {
 		getDicts
 	} from "@/api/system/dict/data.js"
 	export default {
 		data() {
 			return {

 				dict: [],
 				plan: [], //计划
				number:'',
 				show: false,
 				planshow: false,
				time:false,
 				form: {
					Name:'',
					taskName:'',
					taskCode:'',
					planName:'',
					planStartTime:'',
					planEndTime:''
				},
 				rules: {
 					'Name': {
 						type: 'string',
						required: true,
 						message: '请选择任务类型！',
 						trigger: ['blur', 'change']
 					},
 					'taskName': {
 						type: 'string',
						required: true,
 						message: '请输入任务名称！',
 						trigger: ['blur', 'change']
 					},
 					'taskCode': {
 						type: 'string',
						required: true,
 						message: '请输入任务编码！',
 						trigger: ['blur', 'change']
 					},
 					'planName': {
 						type: 'string',
						required: true,
 						message: '请选择计划名称',
 						trigger: ['blur', 'change']
 					},
 					'planStartTime': {
 						type: 'string',
						required: true,
 						message: '请选择预计开始时间',
 						trigger: ['blur', 'change']
 					},
 					'planEndTime': {
 						type: 'string',
						required: true,
 						message: '请选择预计结束时间',
 						trigger: ['blur', 'change']
 					}
 				},
 			}
 		},
 		created() {
 			getDicts('dv_task_type').then(res => {
 				this.dict = res.data
 			})
 		},
 		methods: {
			// 打开选择日期
			open(number) {
				this.time = true
				this.number = number
			},
			// 选择日期点击确定
			confirm(e) {
				// 根据传参判断是选择什么时间
				if(this.number == 1){
					this.form.planStartTime = timestampToTime(e.value)
					
				}else{
					this.form.planEndTime = timestampToTime(e.value)
				}
				this.time = false
			},
 			// 
 			shows() {
 				if (this.form.Name) {
 					this.planshow = true
 				} else {
 					uni.$u.toast('请先选择任务类型！')
 				}
 			},
 			// 选择任务类型按钮
 			button1() {
 				// 重新选择任务类型得时候清空计划
 				this.form.planName = ''
 				this.form.planId = ''
 				this.form.planType = ''
 				this.form.planCode = ''
 				this.dict.forEach(item => {
 					if (this.form.taskType == item.dictValue) {
 						this.form.Name = item.dictLabel
 					}
 				})
 				getPlan(this.form).then(res => {
 					this.plan = res.rows
 				})
 				this.cancel()
 			},
 			// 选择计划名称按钮
 			button2() {
 				this.plan.forEach(item => {
 					if (this.form.planId == item.planId) {
 						this.form.planName = item.planName
 						this.form.planType = item.planType
 						this.form.planCode = item.planCode
 					}
 				})
 				this.cancel()
 			},
 			// 提交
 			tj() {
				this.$refs.uForm.validate().then(res => {
					if(this.form.planEndTime > this.form.planStartTime){
						addDetails(this.form).then(res => {
							if(res.code == 200){
								uni.$u.toast('提交成功！')
							}else{
								uni.$u.toast('提交失败')
							}
						})
					}else{
						uni.$u.toast('结束时间要大于开始时间')
					}
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
 			},

 			groupChange(n) {
 				console.log('groupChange', n);
 			},
 			radioChange(n) {
 				console.log('radioChange', n);
 			},
 			cancel() {
 				this.show = false
 				this.planshow = false
				this.time = false
 			},
 		}

 	}
 </script>

 <style lang="scss">
 	.state-box {
 		padding: 48rpx 0 32rpx 32rpx;
 		margin: 48rpx 32rpx 0 32rpx !important;
 		opacity: 1;
 		border-radius: 20rpx;
 		background: rgba(255, 255, 255, 1);
 		box-shadow: 0px 0px 20rpx rgba(32, 37, 64, 0.06);

 		.information {
 			opacity: 0.3;
 			/** 文本1 */
 			font-size: 24rpx;
 			font-weight: 400;
 			color: rgba(0, 0, 0, 1);
 			margin-top: 30rpx;
 		}

 		.headline {
 			height: 38rpx;
 			opacity: 1;
 			/** 文本1 */
 			font-size: 32rpx;
 			font-weight: 700;
 			letter-spacing: 0px;
 			line-height: 38rpx;
 			color: rgba(32, 37, 64, 1);
 			text-align: left;
 			vertical-align: top;

 		}

 	}

 	.texter {
 		background-color: pink;
 		border-radius: 10rpx;
 		width: 112rpx;
 		height: 36rpx;
 		text-align: center;
 	}


 	.box {

 		// margin: 0 32rpx 48rpx 32rpx;

 		opacity: 1;

 		background: rgba(255, 255, 255, 1);
 		border-bottom: 2rpx solid rgba(32, 37, 64, 0.06);

 		.info {

 			margin-bottom: 20rpx;

 			.information1 {

 				float: left;
 				opacity: 0.3;
 				/** 文本1 */
 				font-size: 24rpx;
 				font-weight: 400;
 				color: rgba(0, 0, 0, 1);
 			}
 		}
 	}

 	.box1 {
 		border-bottom: none
 	}

 	.butt {
 		margin: 0 32rpx 48rpx 32rpx;

 		.verification {
 			margin-top: 50rpx;
 			// display: inline-block;
 			height: 64rpx;
 			opacity: 1;
 			border-radius: 60rpx;
 			margin-bottom: 0 !important;
 			font-size: 32rpx;
 			font-weight: 400;
 			letter-spacing: 0px;
 			line-height: 64rpx;
 			text-align: center;
 			vertical-align: top;
 		}

 		.verification1 {
 			background: linear-gradient(90deg, rgba(56, 222, 255, 1) 0%, rgba(56, 175, 255, 1) 100%);
 			color: rgba(255, 255, 255, 1);
 		}

 		.verification2 {
 			border: 2rpx solid rgba(56, 175, 255, 1);
 			margin-left: 30rpx;
 			// border-image:linear-gradient( rgba(56, 222, 255, 1) 0%, rgba(56, 175, 255, 1) 100%);
 			width: 200rpx;
 			color: rgba(32, 37, 64, 1);
 		}
 	}

 	::v-deep .state-box {
 		margin: 32rpx 0 48rpx 0;
 		padding: 48rpx 32rpx 32rpx 32rpx;
 		// height: 450rpx;
 		opacity: 1;
 		border-radius: 20rpx;
 		background: rgba(255, 255, 255, 1);
 		box-shadow: 0px 0px 20rpx rgba(32, 37, 64, 0.06);

 		.u-form-item__body__left {
 			width: 160rpx !important;
 		}

 		.u-icon__icon {
 			display: block !important;
 			margin: 0 auto;
 			font-size: 32rpx !important;
 		}
 	}

 	.newRepairs-box {
 		margin: 32rpx;
 		padding: 32rpx;
 		opacity: 1;
 		border-radius: 20rpx;
 		background: rgba(255, 255, 255, 1);
 		box-shadow: 0px 0px 20rpx rgba(32, 37, 64, 0.06);
 	}

 	::v-deep .u-form-item {
 		margin-bottom: 10rpx;
 	}

 	.button {

 		margin-top: 60rpx;
 		display: flex;
 		justify-content: space-around;

 		.buuton-common {
 			width: 296rpx;
 			height: 64rpx;
 			opacity: 1;
 			border-radius: 60rpx;

 			/** 文本1 */
 			font-size: 32rpx;
 			font-weight: 400;
 			line-height: 64rpx;
 			text-align: center;
 		}

 		.button-right {
 			background: linear-gradient(90deg, rgba(56, 222, 255, 1) 0%, rgba(56, 175, 255, 1) 100%);
 			color: rgba(255, 255, 255, 1);
 		}

 		.button-left {
 			border: 1px solid #38AFFF;
 			color: rgba(32, 37, 64, 1);
 		}
 	}



 	.popup-header {
 		margin: 0 32rpx 32rpx 32rpx;
 		border-bottom: 0.5px solid #f2f2f4;
 		height: 86rpx;
 		line-height: 86rpx;
 		text-align: center;
 		font-size: 32rpx;
 		font-weight: 400;
 		color: rgba(32, 37, 64, 1);
 	}

 	.container {
 		min-height: 200rpx;
 		/* 设置容器的固定高度 */
 		overflow: auto;
 		/* 添加滚动条 */
 		border-bottom: 0.5px solid #f2f2f4;
 	}

 	// 多选框得边框颜色
 	::v-deep .u-radio__icon-wrap--circle {
 		border-color: rgba(56, 175, 255, 1) !important;
 	}

 	::v-deep .u-radio-group--column {
 		padding: 0 32rpx;
 	}

 	::v-deep .u-form-item__body__left__content__label {
 		font-size: 12px !important;
 	}

 	::v-deep .weizi {
 		.u-popup__content {
 			// height: 500rpx !important;
 			width: 690rpx !important;
 			opacity: 1;
 			border-radius: 20rpx !important;
 			background: white;
 		}

 		.u-radio {
 			margin-bottom: 48rpx !important;
 		}

 		.button {
 			margin: 38rpx auto;
 			width: 490rpx;
 			height: 64rpx;
 			opacity: 1;
 			border-radius: 60rpx;
 			background: linear-gradient(90deg, rgba(56, 222, 255, 1) 0%, rgba(56, 175, 255, 1) 100%);
 			font-size: 32Rpx;
 			font-weight: 400;
 			letter-spacing: 0px;
 			line-height: 64rpx;
 			color: rgba(255, 255, 255, 1);
 			text-align: center;
 		}

 	}
	::v-deep .uicon-arrow-right{
		color: #d5c6ca !important;
	}
 </style>